<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElLoading, ElMessage} from "element-plus";


const headers = {
    Authorization: localStorage.getItem("auth")
}
const banner = ref();

const bannerPageLoading = ref(true);
const getBanner = () => {
  bannerPageLoading.value = true;
    axios.get("/api/banner/get", {headers}).then(response => {
        console.log("获取成功");
        banner.value = response.data.value;
      bannerPageLoading.value = false;
    }).catch(error => {
        console.log("获取失败", error.response);
      bannerPageLoading.value = false;
    })
}
getBanner()
const bannerTableRef = ref();
const currentBanner = ref({});
const handleRowClick = row => {
  if(row!=undefined){
    bannerTableRef.value.data.forEach(r => {
      bannerTableRef.value.toggleRowSelection(r, r.id == row.id);
    })
    currentBanner.value = row;
    console.log("点击一行了",row);
  }
  }

//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
    multipleSelection.value = val;
    if (multipleSelection.value.length == 1) {
        currentBanner.value = multipleSelection.value[0];
    } else {
        currentBanner.value = {};
    }
}
const dialogEditBannerVisible = ref(false);
const addBanner = () => {
console.log("点击新增按钮了..");
currentBanner.value = {
    id:0
};
dialogEditBannerVisible.value = true;
}
const updateBanner = () => {
    dialogEditBannerVisible.value = true;
}
const beforeBannerImageUpload = rawFile => {
    console.log("开始上传了...",rawFile.type);
    if (!rawFile.type.startsWith('image/')) {
        ElMessage.error('请上传图片格式')
        return false;
    } else if (rawFile.size > 1024 * 1024 * 2) {
        ElMessage.error('头像图片不能超过2MB')
        return false;
    }
    return true;
}
const handleBannerImageUploadSuccess = response => {
    console.log("上传成功，图片地址：" + response.value);
    currentBanner.value.src = response.value;
}
const saveBanner = () => {
    console.log("点击了保存", currentBanner.value);
    let loading = ElLoading.service({
        lock: true,
        text: '处理中...',
    })
    axios.post("/api/banner/save", currentBanner.value, {headers}).then(response => {
        console.log("保存成功");
        loading.close();
        dialogEditBannerVisible.value = false;
        getBanner();
    }).catch(error => {
        console.log("保存失败", error.response);
        ElMessage({
            message: error.response.data.message,
            type: 'warning',
        })
    })
}


//删除按钮加载中
const btnRemoveLoading = ref(false);

//删除藏品
const removebanner = () => {
  multipleSelection.value.forEach(banner => {
    btnRemoveLoading.value = true;
    axios.get("/api/banner/remove?id="+banner.id, {headers}
    ).then(response => {
      console.log("删除成功");
      btnRemoveLoading.value = false;
      getBanner();
      ElMessage({
        message: "删除成功",
        type: 'success',
      })
    }).catch(error => {
      console.log("删除失败", error.response);
      btnRemoveLoading.value = false;
      ElMessage({
        message: error.response.data.message,
        type: 'warning',
      })
    })
  })
}


</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>活动中心</el-breadcrumb-item>
    <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
      </div>
      <div>
          <el-button type="primary" @click="addBanner">新增</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-popconfirm title="确认删除吗？"
                       confirm-button-text="是"
                       cancel-button-text="否"
                       @confirm="removebanner">
          <template #reference>
            <el-button type="warning" :disabled="multipleSelection.length == 0" :loading="btnRemoveLoading">删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div>
<!--        <el-table :data="banner"
                  row-key="id"
                  ref="bannerTableRef"
                  @current-change="handleRowClick"
                  @selection-change="handleSelectionChange"
                  stripe style="width: 100%">-->
          <el-table :data="banner"
                    v-loading="bannerPageLoading"
                    row-key="id"
                    ref="bannerTableRef"
                    @current-change="handleRowClick"
                    @selection-change="handleSelectionChange"
                    stripe
                    highlight-current-row
                    empty-text="暂无数据"
                    style="width: 100%">
          <el-table-column type="selection" width="55"/>
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="name" label="轮播图名称" width="180" />
            <el-table-column label="图片" >
                <template #default="scope">
                    <img :src="scope.row.src" width="35" height="30" />
                </template>
            </el-table-column>
            <el-table-column width="90">
                <el-button type="default" @click="updateBanner">修改</el-button>
            </el-table-column>
<!--            <el-table-column width="100">
                <el-button type="danger">删除</el-button>
            </el-table-column>-->
        </el-table>
    </div>
  </div>
    <el-dialog
            v-model="dialogEditBannerVisible"
            :title="(currentBanner.id == 0 ? '新增' : '修改') + '轮播图'"
            width="400" align-center>
        <table width="100%" height="400">
            <tr>
                <td>轮播图名称:</td>
                <td>
                    <el-input v-model="currentBanner.name" style="width:180px"/>
                </td>
            </tr>
            <tr>
                <td>轮播图片</td>
                <td>
                    <el-upload
                            class="avatar-uploader"
                            action="/api/banner/bannerUploadImage"
                            name="partFile"
                            :headers="headers"
                            :show-file-list="false"
                            :before-upload="beforeBannerImageUpload"
                            :on-success="handleBannerImageUploadSuccess"
                    >
                        <img v-if="currentBanner.src" :src="currentBanner.src" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </td>
            </tr>
            </table>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogEditBannerVisible = false">取消</el-button>
        <el-button type="primary" @click="saveBanner">保存</el-button>
      </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 148px;
    display: block;
}
</style>